<template>

  <view class="classlist">
    <view class="loadingLayout" v-if="!classList.length && !noData">
      <uni-load-more status="loading"></uni-load-more>
    </view>

    <view class="content">
      <view
        class="item"
        v-for="item in classList"
        :key="item.id"
      >
        <image
          class="image"
          v-if="classType === 1"
          :src="item.smallPicurl"
          mode="aspectFill"
          @click="goPreviewWall(item.id)"
        ></image>
        <view v-if="classType === 1" class="item-details">
          <view class="desc">{{item.description}}</view>
        </view>
        <image class="image" v-else :src="item.imgUrl" mode="aspectFill" @click="goPreviewAlbum(item.id)"></image>
        <view v-if="classType === 2" class="item-details">
          <view class="desc">{{item.description}}</view>
        </view>
      </view>
    </view>

    <view class="loadingLayout" v-if="classList.length || noData">
      <uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
    </view>

    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {
  onLoad,
  onUnload,
  onReachBottom,
  onShareAppMessage,
  onShareTimeline,
} from '@dcloudio/uni-app'

import { apiGetWallList, apiGetAlbumList } from '@/api/apis.js'
import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue'
//分类列表数据
const classList = ref([])
const noData = ref(false)

//定义data参数
const queryParams = {
  pageNum: 1,
  pageSize: 12,
}
const classType = ref(0)
let pageName = ''

onLoad((e) => {
  let { id = null, name = null, type = null } = e
  if (type) classType.value = Number(type) // 1 壁纸 2 专辑
  queryParams.type = classType.value
  if (id) queryParams.classId = id
  if (name) pageName = name

  //修改导航标题
  uni.setNavigationBarTitle({
    title: pageName,
  })
  getClassList()
})

onReachBottom(() => {
  if (noData.value) return
  queryParams.pageNum++
  getClassList()
})

//获取壁纸分类列表网络数据
const getClassList = async () => {
  let res
  if (classType.value === 1) res = await apiGetWallList(queryParams)
  if (classType.value === 2) res = await apiGetAlbumList(queryParams)
  classList.value = [...classList.value, ...res.rows]
  if (queryParams.pageSize > res.rows.length) noData.value = true
}

const goPreviewWall = (id) => {
  uni.navigateTo({
    url: '/pages/preview/preview?id=' + id,
  })
}

const goPreviewAlbum = (id) => {
  uni.navigateTo({
    url: '/pages/preview/previewAlbum?id=' + id,
  })
}

//分享给好友
onShareAppMessage((e) => {
  return {
    title: 'Wopaper壁纸-' + pageName,
    path: '/pages/classlist/classlist?id=' + queryParams.classid + '&name=' + pageName,
  }
})

//分享朋友圈
onShareTimeline(() => {
  return {
    title: 'Wopaper壁纸-' + pageName,
    query: 'id=' + queryParams.classid + '&name=' + pageName,
  }
})

</script>
<style lang="scss" scoped>
.classlist {
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item {
      position: relative; // 添加相对定位
      height: 440rpx;
      overflow: hidden; // 确保内容不溢出

      image {
        width: 100%;
        height: 100%;
        display: block;
        transition: filter 0.3s; // 添加过渡效果
      }

      .item-details {
        position: absolute; // 绝对定位
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5); // 半透明背景
        color: white;
        padding: 10rpx;
        transition: opacity 0.3s; // 添加过渡效果
      }
    }
  }
}
</style>
